<template>
  <div id="id">
    <router-link to="/aaa">查询天气</router-link>
    <router-link to="/english">每日一句</router-link>
    <router-link to="/wangyiyun">网易云热评</router-link>
    <router-link to="/recipe">菜谱查询</router-link>
    <router-link to="/shenghuo">生活小窍门</router-link>
    <router-link to="/BMITEST">BMI标准体重测试</router-link>
    <hr>
    <input type="text" id="height" placeholder="请输入您的身高(cm)"/>
    <input type="text" id="weight" placeholder="请输入您的体重(kg)"/>
    <button v-on:click="change()">获取</button>
    <div id="page">
      <p>{{bmi.bmi}}</p>
      <p>{{bmi.normbmi}}</p>
      <p>{{bmi.idealweight}}</p>
      <p>	{{bmi.normweight}}</p>
      <p>{{bmi.healthy}}</p>
      <p>{{bmi.tip}}</p>
    </div>
  </div>
</template>

<script>
    export default {
      name: "BMITEST",
      data(){
        return{
          bmi:'',
        }
      },
      methods:{
        change:function () {
          var height = $("#height").val();
          var weight = $("#weight").val();
          let that=this;
          $.ajax({
            type:"GET",
            url:"http://api.tianapi.com/txapi/bmi/index?key=0c53d7b6b6dbbe5c3028d59fa6dbcbbd&height="+height+"&weight="+weight,
            // data:{"id":val},     // data参数是可选的，有多种写法，也可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,
            data:"",
            async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
            cache:true,  // 表示浏览器是否缓存被请求页面,默认是 true
            dataType:"json",   // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
            success:function(data){
              data.newslist[0].bmi="身体质量指数 : "+data.newslist[0].bmi;
              data.newslist[0].normbmi="正常BMI指数范围 : "+data.newslist[0].normbmi;
              data.newslist[0].idealweight="标准体重 : "+data.newslist[0].idealweight;
              data.newslist[0].normweight="正常体重范围 : "+data.newslist[0].normweight;
              data.newslist[0].healthy="健康风险 : "+data.newslist[0].healthy;
              data.newslist[0].tip="身材小贴士 : "+data.newslist[0].tip;
              that.bmi=data.newslist[0];
              console.log(data);
            },
            error:function(){
              console.log("发生错误")
              alert("发生错误");
            },
            complete:function(){
              console.log("ajax请求完事，最终操作在这里完成")
            },
          });
        }
      },
    }
</script>

<style scoped>
  #id{
    text-align: center;
  }
  #page{
    width:500px;
    height: 800px;
    margin: 0 auto;
    text-align: left;
  }
</style>
